<template>
	<view>
			<view class="u-page">
				<view class="name-card" @click="detailPage()">
					<view @click.stop.prevent="getUserProfile()" >
						<view class="avatar" v-if="userInfo.avatar || avatarGot">
							<image :src="userInfo.avatar" mode="aspectFill"></image>
						</view>
						<view class="avatar" v-else>
							<image :src="defaultAvatar" mode="aspectFill"></image>
						</view>
					</view>
<!-- 					<view class="avatar-open">
						<open-data type="userAvatarUrl"></open-data>
					</view> -->
					<view class="detail">
						<view class="len1">
							<view class="name">{{userInfo.userName}}</view>
						</view>
						<view class="rzInfo" @click.stop.prevent="doFaceRz()">
							<image :src="API_PREFIX + '/mobile/wxImages/mime/y.png'" mode="aspectFill" v-if="userInfo.rz"></image>
							<image :src="API_PREFIX + '/mobile/wxImages/mime/w.png'" mode="aspectFill" v-else></image>
						</view>
						<!-- <view class="len-infos">
							<view class="len">
								<view class="k">部门：</view>
								<view class="v">{{userInfo.dept}}</view>
							</view>
							<view class="len">
								<view class="k">职务：</view>
								<view class="v">{{userInfo.post}}</view>
							</view>
						</view> -->
					</view>
					<view class="link-right">
						<!-- <view class="qricon"><image src="/static/imgs/qr.png" mode=""></image></view>  -->
						<view class="right"><u-icon name="arrow-right" color="#fff" size="28"></u-icon></view>
					</view>
				</view>
				<view v-if="noticeText">
					<u-notice-bar :text="noticeText"></u-notice-bar>
				</view>

				<view class="menus">
					<u-cell-group>
						<u-cell v-for="(item, index) in list" :key="index"
							size="large" :icon="item.icon" :title="item.title" :isLink="true"
								 @click="handleMenuClick(item)"
						></u-cell>
					</u-cell-group>
				</view>

				<view class="menus2" v-for="(group, gid) in groupMenus" :key="gid">
					<view class="title">
						{{group.title}}
					</view>
					<view class="btns">
                        <view class="btn" v-for="(btn, btnIndex) in group.btns" :key="btnIndex" @click="handleMenuClick(btn)">
                        	<image :src="API_PREFIX + btn.img"></image>
                        </view>
                    </view>
				</view>

				
				<view class="btn-leave" @click="disLogin()">注销账号</view>
			</view>
	</view>
</template>
<script>
	import { mapState, mapMutations } from 'vuex';
	import sceneMixins from '@/utils/sceneMixins';
	import faceValidate from './faceValidate.js';
	export default {
		options: { styleIsolation: 'shared' },
		mixins: [sceneMixins, faceValidate],
		computed: {
			...mapState(['userInfo', 'openId'])
		},
		data() {
			return {
				API_PREFIX: this.API_PREFIX,
				defaultAvatar: this.API_PREFIX + '/mobile/wxImages/mime/avatar.png',
				noticeText: '',
				list: [],
				avatarGot: false,
				groupMenus:'',
			}
		},
		onLoad() {
				var vm = this;
				vm.getAndLoad('申报的配置json', '/mobile/wxJSON/personalCenter.json', function (res) {
					vm.list = res.menus || [];
					vm.disLoginTip = res.disLoginTip;
					vm.noticeText = res.noticeText || ''
					vm.groupMenus = res.groupMenus
				
				});
		},
		methods: { 
			...mapMutations(['logout']),
			disLogin: function () {
				var vm = this;
				uni.showModal({
				    title: '提示',
				    content: vm.disLoginTip || '是否确认注销账号，借此小程序将失去您的登录信息和个人信息。',
				    showCancel: true,
				    success: function(res3) {
				      	res3.confirm && vm.getAndLoad('注销', '/mobile/h5/covid19/apiRyzc/del.jsp?openId=' + vm.openId, function (res) {
						   if (res.code == 0) {
							   uni.showModal({
							       title: '提示',
							       content: res.msg || '注销成功',
							       showCancel: false,
							       success: function(res2) {
							         vm.logout();
									 uni.reLaunch({
										url: '/pages/index/index'
									 });
									 // uni.navigateBack();
							       }
							   });
						   } else { 
							   uni.$u.toast(res.msg || '注销失败');
						   }
					   }) 
				    }
				});
			},
			doFaceRz: function () {
				if (!this.userInfo.rz) {
					this.startFaceValidate();
				} 
			},
			detailPage: function () {
				uni.navigateTo({
					url: '/pages/mine/detail' 
				})
			},
			handleMenuClick: function (item) {
				var vm = this;
				if (item.id == 'wdhzm') {
					// 判断我有没有申请， 申请的话，
					// 跳转到个人页面，没有的话，跳转到申请页面
					// vm.getAndLoad('是否已经注册', '/mobile/ymt/owncenter/wdhzm/ownhzm.jsp?openId=' + vm.openId, function (res) {
					// 	if (!res.data.photo) {	
					// 		uni.navigateTo({
					// 			url: item.url
					// 		})
					// 	} else {
							// 现在直接能看了， 但是要有照片才让打印
							vm.gotoH5Page(item.detailH5+'?needRefresh=true&id='+vm.openId);
						// }
					// }) 
					
				} else if (item.id == 'jtcys') {
					uni.navigateTo({
						url: item.url
					})
				} else if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				} else if (item.h5) {
					vm.gotoH5Page(item.h5);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.name-card {
		color: #fff;
		background: url('#{$APIPATH}/mobile/wxImages/mime/bg.png');
		display: flex;
		align-items: center;
		height: 260rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 60rpx; 
		position: relative;
		.avatar {
			image {
				width: 122rpx;
				height: 122rpx;
				border-radius: 50%;
				border: 6rpx solid #c1def6;
			}
		}
		.link-right {
			display: flex;
			align-items: center;
			position: absolute;
			right: 10rpx;
			.qricon {
				image {width: 40rpx;
				height: 40rpx;}
				margin-right: 16rpx;
			}
		}
		.avatar-open {
			width: 122rpx;
			height: 122rpx;
			border-radius: 50%;
			border: 6rpx solid #fff;
			overflow: hidden;
		}
		.detail {
			margin-left: 18rpx;
			.len1 {
				display: flex;
				align-items: baseline;
				line-height: 72rpx;
				margin-top: -25rpx;
				.name {
					font-size: 36rpx;
					margin-right: 20rpx;
				}
				.age {
					font-size: 26rpx;
				}
			}
			.len-infos {
				.len {
					display: flex;
					font-size: 28rpx;
					line-height: 42rpx;
					.k {
						margin-right: 8rpx;
					}
				}
			}
			.rzInfo {
				image {
					width: 114rpx;
					height: 36rpx;
				}
			}
		}
	}
	.menus {
		background: #fff;
		margin: 10rpx 0;
		/deep/ .u-cell__title-text {
			margin-left: 20rpx;
		}
	}
	.btn-leave {
		height: 80rpx;
		line-height: 80rpx;
		color: red;
		text-align: center;
		background: #fff;
		margin-top: 380rpx;
	}


	.menus2 {
		// TODO
		background: #fff;
		padding: 15rpx 0 35rpx;
		// border-radius: 30rpx;
		// margin: 30rpx;
		// height: 240rpx;
		.title{
			padding: 10rpx 30rpx;
		}
		.btns{
			width: 100%;
			display: flex;
			justify-content: space-evenly; 
			margin-top: 15rpx;  

			.btn{
				image{
					    width: 280rpx;
    					height: 140rpx;
				}
			
			
			}
		}
	}
</style>
